<template>
    <el-container>
      <el-header>
        <el-menu
            default-active="1"
            class="el-menu-demo"
            mode="horizontal"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            :ellipsis="false"
        >
          <el-menu-item index="1-1" style="width: 200px;">小硕化妆品 - 在线商城</el-menu-item>
          <el-sub-menu index="2">
            <template #title>{{admin.username}}</template>
            <el-menu-item index="2-1" @click="updateDialogShow=true">个人中心</el-menu-item>
            <el-menu-item index="2-2" @click="logout">退出登录</el-menu-item>
            <el-menu-item index="2-3" @click="chgPwdDialog=true">修改密码</el-menu-item>
          </el-sub-menu>
        </el-menu>
      </el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu
              active-text-color="#ffd04b"
              background-color="#545c64"
              class="el-menu-vertical-demo"
              default-active="2"
              text-color="#fff"
              :router="true"
          >
            <el-menu-item  index="/admin/index">
            <template #title>
              <el-icon><HomeFilled /></el-icon>
              <span>后台首页</span>
            </template>
          </el-menu-item >
            <el-sub-menu index="1">
              <template #title>
                <el-icon><Avatar /></el-icon>
                <span>管理员管理</span>
              </template>
              <el-menu-item index="/admin/admin">管理员列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="2">
              <template #title>
                <el-icon><Memo /></el-icon>
                <span>商品分类管理</span>
              </template>
              <el-menu-item index="/admin/category">分类列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="3">
              <template #title>
                <el-icon><Goods /></el-icon>
                <span>商品管理</span>
              </template>
              <el-menu-item index="/admin/goods">商品列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="4">
              <template #title>
                <el-icon><UserFilled /></el-icon>
                <span>用户管理</span>
              </template>
              <el-menu-item index="/admin/user">用户列表</el-menu-item>
            </el-sub-menu>
            <el-sub-menu index="5">
              <template #title>
                <el-icon><Tickets /></el-icon>
                <span>订单管理</span>
              </template>
              <el-menu-item index="/admin/order">订单列表</el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <RouterView></RouterView>
        </el-main>
      </el-container>
    </el-container>
  <!-- 修改商品对话框开始 -->
  <el-dialog v-model="chgPwdDialog" title="修改商品" width="500">
    <el-form>
      <el-form-item label="原始密码" label-width="20%">
        <el-input  type="password" v-model="chgPwdObj.oldPwd" autocomplete="off" placeholder="请输入名称" style="width: 240px" />
      </el-form-item>
      <el-form-item label="新密码" label-width="20%">
        <el-input type="password"  v-model="chgPwdObj.newPwd" autocomplete="off" placeholder="请输入名称" style="width: 240px" />
      </el-form-item>
      <el-form-item label="确定密码" label-width="20%">
        <el-input  type="password" v-model="chgPwdObj.newPwd1" autocomplete="off" placeholder="请输入名称" style="width: 240px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="chgPwdDialog = false">取消</el-button>
        <el-button type="primary" @click="chgPwd">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改商品对话框结束 -->
  <!-- 修改管理员信息对话框开始 -->
  <el-dialog v-model="updateDialogShow" title="修改管理员个人信息" width="500">
    <el-form>
      <el-form-item label="用户名" label-width="20%">
        <el-input v-model="admin.username" autocomplete="off" placeholder="请输入用户名" style="width: 240px" />
      </el-form-item>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="admin.phone" autocomplete="off" placeholder="请输入电话" style="width: 240px" />
      </el-form-item>
      <el-form-item label="邮箱" label-width="20%">
        <el-input   v-model="admin.email" autocomplete="off" placeholder="请输入邮箱" style="width: 240px" />
      </el-form-item>
      <el-form-item label="真实姓名" label-width="20%">
        <el-input v-model="admin.realname" autocomplete="off" placeholder="请输入真实姓名" style="width: 240px" />
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow=false">取消</el-button>
        <el-button type="primary" @click="chgInfo">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改管理员信息对话框结束 -->
</template>

<script setup>
import router from "@/router/index.js";
import {useTokenStore} from "@/stores/tokenStore.js";
import adminApi from "@/api/adminApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";
const tokenStore = useTokenStore();
//是否显示修改管理员信息对话框
const updateDialogShow = ref(false);

//管理员信息
const admin = ref({
    username: null,
    phone: null,
    email: null,
    realname: null,
});
//是否显示修改密码的对话框
const chgPwdDialog = ref(false);
//用来保存修改密码信息的对象
const chgPwdObj = ref({
  oldPwd: null,
  newPwd: null,
  newPwd1: null
})
const logout = () =>{
  //将token重置
  tokenStore.$reset();
  //跳转到管理员的登录页
  router.push("/admin/login");
}
//获取已经登录的信息
const getInfo = () =>{
  adminApi.getInfo()
      .then(resp => {
        admin.value = resp.data;
      })
}
//修改密码
const chgPwd = () => {
  adminApi.chgPwd(chgPwdObj.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          chgPwdObj.value = {
            oldPwd: null,
            newPwd: null,
            newPwd1: null
          }
          chgPwdDialog.value=false;
          //退出
          logout()
        } else {
          ElMessage.error(resp.msg);
        }
      })
}
//修改个人信息
const chgInfo = ()=>{
  getInfo();
  adminApi.update(admin.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          updateDialogShow.value=false;
        } else {
          ElMessage.error(resp.msg);
        }
      })
}
getInfo()
</script>

<style scoped>
.el-header {
  padding: 0px;
}
.el-container, .el-menu {
  height: 100%;
}
.el-menu--horizontal > .el-menu-item:nth-child(1) {
  margin-right: auto;
}
</style>